<template>
  <div id="Login">
    <div class="dl">
      <div class="Log"><img src="../assets/xboot.png" alt="" srcset=""></div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="账户密码登陆" name="first">
          <fromdl></fromdl>
        </el-tab-pane>
        <el-tab-pane label="注册账户" name="second">
          <zc></zc>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import fromdl from '../form/fromdl.vue'
import zc from '../form/zc.vue'
export default {
  name: 'Login',
  data () {
    return {
      activeName: 'second'
    }
  },
  methods: {
    handleClick(tab, event) {
      
    }
  },
  components: {
    zc,fromdl
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  #Login{
    width: 100%;
    height: 620px;
    position: absolute;
    background: url(../assets/bj.jpg) no-repeat 0 0;
    background-size: cover;
    background-position: center center;
  }
  #Login .dl{
    width: 400px;
    height: 400px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    background-color: cadetblue;
  }
  #Login .dl .Log{
    width: 100%;
    height: auto;
    text-align: center;
  }
  #Login .dl .Log img{
    width: 70%;
    height: 80px;
  }
  #Login .dl .el-tabs__item{
    text-align: center;
    width: 200px !important;
  }
</style>
